<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="../../../static/css/style.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="../../../static/js/jquery.js"></script>
  <script type="text/javascript" src="../../../static/js/checkInfo.js"></script>
  <script>
    //全局信息
    window.datas={
      addressInfo:[],
      customInfo:{},
    }
    //获取地区信息
    function getAddressInfo(){
      $.ajax({
        url: "/commonProvince",
        type: "get",
        dataType: "json",
        success:(data)=>{
          window.datas.addressInfo=data.data;
          $(".province").html('<option value="">请选择省份</option>')
          window.datas.addressInfo.forEach((item,index)=>{
            $(".province").append(`<option value="${item.id}">${item.pname}</option>`)
          })
          $(".province").val(datas.modifyInfo.provinceId);
          provinceChange();
          $(".city").val(datas.modifyInfo.address);
        }
      })
    }
    //选择省份之后
    function provinceChange() {
      let addressInfo = datas.addressInfo;
      let city = [];
      let id = $(".province option:selected").val();
      for (let i = 0; i < addressInfo.length; i++) {
        if (addressInfo[i].id == id) {
          city = addressInfo[i].citys;
          break;
        }
      }
      $(".city").html('<option value="">请选择</option>')
      city.forEach((item, index) => {
        $(".city").append(`<option value="${item.id}">${item.cname}</option>`);
      })

    }
    //获取表单数据
    function getcustomInfo() {
      datas.customInfo = {
        customid:$(".customId").val(),
        customname: $(".customname").val(),
        sex: $('input[name=sex]:checked').val(),
        company: $(".company").val(),
        telephone: $(".telephone").val(),
        homeaddress: $(".homeaddress").val(),
        address: $(".city").val(),
        distract: $(".distract").val(),
        status: $(".status").val(),
        createid: JSON.parse(localStorage.getItem("user")).uid,
        createtime: $(".createtime").val(),
      }
    }
    //更新用户
    function updateCustom(){
      datas.check.checkAll(() => {
        getcustomInfo()
        if(datas.customInfo.address==""){
          alert("没有选择城市");
          return false
        }
        $.ajax({
          url: "/custom",
          type: "put",
          dataType: "json",
          contentType:"application/json;charset=utf8",
          data:JSON.stringify(datas.customInfo),
          success:(data)=>{
            if(data.status==200){
              alert("修改成功");
              window.location.href='/market/customer/findPageAll'
            }
          }
        })
      }, (errorMsg) => {
        $("#msg").text(errorMsg)
      })

    }
    $(()=>{
      let modifyInfo=JSON.parse(sessionStorage.getItem("ModifyInfo"));
      datas.modifyInfo=modifyInfo;
      getAddressInfo();
      $(".customId").val(modifyInfo.customid);
      $(".customname").val(modifyInfo.customname);
      $('input:radio').eq(modifyInfo.sex).attr('checked', 'true')
      $(".company").val(modifyInfo.company);
      $(".telephone").val(modifyInfo.telephone);
      $(".homeaddress").val(modifyInfo.homeaddress);
      $(".distract").text(modifyInfo.distract);
      $(".status").val(modifyInfo.status);
      $(".createdname").val(modifyInfo.createdName);
      $(".createtime").val(modifyInfo.createtime);
      sessionStorage.removeItem("ModifyInfo");
      datas.check = new Check([
        {
          domElement: $(".customname")[0],
          regex: /^[\u4e00-\u9fa5a-zA-Z0-9]{2,30}$/,
          resMethod: (resolve, reject) => {
            let customName=$(".customname").val();
            $.ajax({
                      url:`/custom/isExist/${customName}`,
                      type: "get",
                      dataType: "json",
                      success: (data) => {
                        if (!data.flag) {
                          $("#customNameErrorMsg").text("客户姓名可以正常使用");
                          $(".customname").css({borderColor: "black"})
                        } else {
                          $("#customNameErrorMsg").text("客户姓名已存在");
                          $(".customname").css({borderColor: "red"})
                          reject();
                        }
                      },
                    }
            )
          }, rejMethod: () => {
            $("#customNameErrorMsg").text("客户姓名为2-30个字符");
            $(".customname").css({borderColor: "red"})
          },
          Msg: "客户姓名为2-30个字符"
        },
        {
          domElement: $(".company")[0],
          regex: /^[\u4e00-\u9fa5_a-zA-Z0-9_]{2,30}$/,
          resMethod: () => {
            $("#companyErrorMsg").text("");
            $(".company").css({borderColor: "black"})
          },
          rejMethod: () => {
            $("#companyErrorMsg").text("不能超过30个字符");
            $(".company").css({borderColor: "red"})
          },
          Msg: "不能超过30个字符",
        },
        {
          domElement: $(".telephone")[0],
          regex: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/,
          resMethod: () => {
            $("#phoneErrorMsg").text("格式正确");
            $(".telephone").css({borderColor: "black"})
          },
          rejMethod: () => {
            $("#phoneErrorMsg").text("电话号码格式错误");
            $(".telephone").css({borderColor: "red"})
          },
          Msg: "电话号码格式错误",
        },
        {
          domElement: $(".homeaddress")[0],
          regex: /^[\u4e00-\u9fa5_a-zA-Z0-9_]{5,130}$/,
          resMethod: () => {
            $("#homeaddressErrorMsg").text("");
            $(".homeaddress").css({borderColor: "black"})
          },
          rejMethod: () => {
            $("#homeaddressErrorMsg").text("联系地址要5-130个字符");
            $(".homeaddress").css({borderColor: "red"})
          },
          Msg: "联系地址要5-130个字符",
        }
      ]);
    })
  </script>
</head>

<body>
<div class="place"> <span>位置：</span>
  <ul class="placeul">
    <li>营销管理</li>
    <li>客户管理</li>
    <li>修改</li>
  </ul>
</div>
<div class="formbody">
  <div class="formtitle"><span>客户信息</span></div>
  <ul class="forminfo">
    <li>
      <input type="hidden" class="customId"/>
    </li>
    <li>
      <label>姓名</label>
      <input type="text" class="dfinput customname"/>
      <i id="customNameErrorMsg">必填，不能超过30个字符</i>
    </li>
    <li>
      <label>性别</label>
      <cite>
        <input name="sex" type="radio" value="2" checked="checked"/>男
        <input name="sex" type="radio" value="1"/>女
      </cite>
    </li>
    <li>
      <label>所属公司名称</label>
      <input name="company" type="text" class="dfinput company"/>
      <i id="companyErrorMsg">必填，不能超过30个字符</i>
    </li>
    <li>
      <label>联系方式</label>
      <input name="telephone" type="text" class="dfinput telephone"/>
      <i id="phoneErrorMsg">必填，不能超过30个字符</i>
    </li>
    <li>
      <label>联系地址</label>
      <input name="homeaddress" type="text" class="dfinput homeaddress"/>
      <i id="homeaddressErrorMsg">必填，不能超过130个字符</i>
    </li>
    <li>
      <label>所属区域</label>
      <select name="address" class="province" onchange="provinceChange()">
        <option>请选择</option>
      </select>
      省
      <select class="city">
        <option>请选择</option>
      </select>
      市
      <i id="addressErrorMsg">必选</i>
    </li>
    <li>
      <label>描述</label>
      <textarea name="distract" class="distract textinput"></textarea>
      <i>可选</i>
    </li>
    <li>
      <label>状态</label>
      <select class="status">
        <option value="1">可用</option>
        <option value="0">不可用</option>
      </select>
      <i>必选</i>
    </li>
    <li>
      <label>创建人</label>
      <input name="" type="text" value="" readonly="readonly" class="createdname"/>
      <i>不能编辑</i>
    </li>
    <li>
      <label>创建时间</label>
      <input name="" type="text" value="" readonly="readonly" class="roinput createtime"/>
      <i>不能编辑</i>
    </li>
    <li>
      <label>&nbsp;</label>
      <input name="" type="button" class="btn" value="确定" onclick="updateCustom()"/>

      <input name="" type="button" class="btn" value="返回"
             onclick="window.location.href='/market/customer/findPageAll'"/>
    </li>
    <li id="msg"></li>
  </ul>
</div>
</body>
</html>
